<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/classification.css" />
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/iconfont.css" />
	</head>
	<body>
		<div id="web">
			<header>
				<input type="button" value="Back"/>
			   
			    <select class="xiala">
					<option>&nbsp;广州市</option>
					<option>深圳市</option>
					<option>东莞市</option>
				</select>
			    <p>发现</p>
			</header><!--header-->
			
			
			
			<section>
				<div class="secBox1">
					<ul>
						<li><a href=""><img src="img/yan1.png"/></a></li>
						<li><a href=""><img src="img/yan2.png"/></a></li>
						<li><a href=""><img src="img/yan3.png"/></a></li>
						<li><a href=""><img src="img/yan4.png"/></a></li>
					</ul>
					<ul class="secBox1-1">
						<li>美食</li>
						<li>电影</li>
						<li>运动</li>
						<li>唱歌</li>
					</ul>
				</div>
				<div class="secBox2">
					<div class="secBox2-1">
						<img src="img/xiao1_06.jpg" />
						<span>美食类</span>
					</div>
					<div class="secBox2-2">
						
						<i class="iconfont icon-you"></i>
						<span>更多&nbsp;</span>
					</div>
				</div>
				<div class="secBox3">
					<ul>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li class="ying"><a href=""><img src="img/ying1_03.jpg"/></a></li>
					</ul>
				</div>
				<div class="secBox2">
					<div class="secBox2-1">
						<img src="img/xiao1_06.jpg" />
						<span>美食类</span>
					</div>
					<div class="secBox2-2">
						
						<i class="iconfont icon-you"></i>
						<span>更多&nbsp;</span>
					</div>
				</div>
				<div class="secBox3">
					<ul>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li class="ying"><a href=""><img src="img/ying1_03.jpg"/></a></li>
					</ul>
				</div>
				<div class="secBox2">
					<div class="secBox2-1">
						<img src="img/xiao1_06.jpg" />
						<span>美食类</span>
					</div>
					<div class="secBox2-2">
						
						<i class="iconfont icon-you"></i>
						<span>更多&nbsp;</span>
					</div>
				</div>
				<div class="secBox3">
					<ul>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li><a href=""><img src="img/ying1_03.jpg"/></a></li>
						<li class="ying"><a href=""><img src="img/ying1_03.jpg"/></a></li>
					</ul>
				</div>
				
			</section><!--section-->
			
			
			
			<footer>
				<ul>
					<li>
						<a href="">
							<i class="iconfont icon-noun28593cc"></i>
							<p>首页</p>
						</a>
					</li>
					<li>
						<a href="">
							<i class="iconfont icon-fl"></i>
							<p>分类</p>
						</a>
					</li>
					<li class="active">
						<a href="">
							<i class="iconfont icon-zhinanzhen"></i>
							<p>发现</p>
						</a>
						
					</li>
					<li>
						<a href="">
							<i class="iconfont icon-ren"></i>
							<p>我的</p>
						</a>
					</li>
				</ul>
			</footer><!--footer-->
		</div><!--web-->
		
		<script>
				document.body.style.height  = window.innerHeight+"px";
				
				function recalc() {
                var clientWidth = document.documentElement.clientWidth;
                if(!clientWidth) return;
                document.documentElement.style.fontSize = 40 * (clientWidth / 750) + 'px';
                //                             字体大小
            }

            function initRecalc() {
                recalc();
                var resizeEvt = 'osrientationchange' in window ? 'orientationchange' : 'resize';
                if(!document.addEventListener) return;
                window.addEventListener(resizeEvt, recalc, false);
                document.addEventListener('DOMContentLoaded', recalc, false);
            }
            initRecalc();
			</script>
	</body>
</html>
